<template>
		<div class="ele-body">
			<el-row class="oneRow">
				<!-- 第一行按钮 -->
					<el-col class="oneCol">
						<el-tooltip content="查询" placement="top-start">
							<vxe-button class="oneButton" @click="selectXs">查询</vxe-button>
						</el-tooltip>
					</el-col>
					<el-col class="oneCol">
						<el-tooltip content="导出" placement="top-start">
							<vxe-button class="oneButton" @click="getExcel()">导出</vxe-button>
						</el-tooltip>
					</el-col>
			</el-row>
			
				<!-- 第二行表格 -->
		<div class="tableDiv">
			<el-row>
				<el-col class="ysy-table1">
					<vxe-toolbar  custom>
						<template v-slot:buttons>
							<el-row class="threeRow">
								<el-col class="twoColDate">
									<span class="spanClass">日期：</span>
										<el-date-picker
											class="twoDate" 
											v-model="djDate"
											type="daterange"
											range-separator="-"
											start-placeholder="开始日期"
											end-placeholder="结束日期">
										</el-date-picker>
								</el-col>
								<el-col class="twoCol">
									<span class="spanClass">客户：</span>
										<el-select 
										class="twoInput"
										v-model="querys.kh"
										placeholder="客户"
										multiple
										filterable>
											<el-option v-for="item in khList" :key="item.id" :label="item.name" :value="item.id">
												<span style="float: left">{{ item.name}}&nbsp;</span>
												<span style="float: right; color: #666666; font-size: 13px">{{ item.code }}</span>
											</el-option>
										</el-select>
								</el-col>
								<el-col class="twoCol">
									<span class="spanClass">品牌：</span>
										<el-select class="twoInput" placeholder="品牌" v-model="querys.pp" multiple clearable
											filterable collapse-tags>
											<el-option v-for="item in ppList" :key="item.id" :label="item.spmc"
												:value="item.id"></el-option>
										</el-select>
								</el-col>
								<el-col class="twoCol">
									<span class="spanClass">汇总：</span>
									<el-select class="twoInput" placeholder="汇总" v-model="groupBy"  clearable
										filterable >
										<el-option v-for="item in hzList" :key="item.spbh" :label="item.spmc"
											:value="item.spbh"></el-option>
									</el-select>
								</el-col>
							</el-row>
						</template>
					</vxe-toolbar>
					<vxe-table 
					auto-resize 
					ref="refTable1"
					border 
					show-header-overflow 
					show-overflow
					highlight-hover-row
					height="90%"
					class="mytable-scrollbar" 
					size="mini"
					highlight-current-row 
					resizable
					show-footer
					:footer-method="table1Footer"
					:data="table1"
					:loading="spmxLoading"
					:sortable="sortableConfig"
					:class="{ 'custom-background': bodyBackgroundColor}"
					>
					<vxe-table-colgroup title="家庭支出" align="center" >
					<vxe-table-column type="seq" title=" " width="40"></vxe-table-column>
					<vxe-table-column field="djrq" title="单据日期" width="120" align="center" ></vxe-table-column>
					<vxe-table-column field="spmc" title="销售类型" width="120" align="center" ></vxe-table-column>
					<vxe-table-column field="ppmc" title="品牌名称" min-width="120"  ></vxe-table-column>
					<vxe-table-column field="khmc" title="客户名称" min-width="120" align="center"  ></vxe-table-column>
					<vxe-table-column field="je" title="销售金额" width="120" align="center" ></vxe-table-column>
					<vxe-table-column field="bz" title="备注" width="120" align="center" ></vxe-table-column>
					<vxe-table-column field="ce" title="差额" sortable width="120" align="center" ></vxe-table-column>
					</vxe-table-colgroup>
					</vxe-table>

				</el-col>
			</el-row>
		</div>
	
	</div>
</template>

<script>
	import XEUtils from 'xe-utils'
	
	export default{
	
		data() {
			return{
				groupBy:'',
				//查询条件
				querys: {
					kh: [],
					pp: []
				},
				khList:[],
				ppList:[],
				hzList:[],
				djDate:'',
				table1:[],
				spmxLoading:false,
				bodyBackgroundColor: true,//背景颜色
				sortableConfig:true
			}
		},
	methods:{
		
		//条件查询客户
		tjcxKh(kh){
			this.$http.post("/scm/scm/xsmx/khlist",{
				code : kh,
				limit:30
				}).then(res => {
				if(res.data.code === 0){
					this.khList = res.data.data
				}
			})
		},
		selectXs(){
			
			//console.log(this.groupBy,'this.groupBy');
			if(this.groupBy=='pp'){
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('djrq'));
				this.$refs.refTable1.showColumn(this.$refs.refTable1.getColumnByField('spmc'));
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('khmc'));
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('ppmc'));
			}else if(this.groupBy=='kh'){
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('djrq'));
				this.$refs.refTable1.showColumn(this.$refs.refTable1.getColumnByField('khmc'));
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('spmc'));
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('ppmc'));
			}else if(this.groupBy=='xslx'){
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('djrq'));
				this.$refs.refTable1.showColumn(this.$refs.refTable1.getColumnByField('ppmc'));
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('khmc'));
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('spmc'));
			}else if(this.groupBy=='rq'){
				this.$refs.refTable1.showColumn(this.$refs.refTable1.getColumnByField('djrq'));
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('ppmc'));
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('khmc'));
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('spmc'));
			}else{
				this.$refs.refTable1.hideColumn(this.$refs.refTable1.getColumnByField('djrq'));
				this.$refs.refTable1.showColumn(this.$refs.refTable1.getColumnByField('ppmc'));
				this.$refs.refTable1.showColumn(this.$refs.refTable1.getColumnByField('khmc'));
				this.$refs.refTable1.showColumn(this.$refs.refTable1.getColumnByField('spmc'));
			}
			//查询已存在的商品
			this.$http.post("/scm/scm/xsmx/selectXs",{
				...this.querys,
				ksrq:this.$util.toDateString(this.djDate[0], 'yyyy-MM-dd'),
				jsrq:this.$util.toDateString(this.djDate[1], 'yyyy-MM-dd'),
				hz:this.groupBy,
			}).then(res => {
				//console.log(res);
				this.table1  = res.data;
				})
			},
			selectSp(){
				//查询已存在的商品
				this.$http.post("/scm/scm/xsmx/selectSp").then(res => {
					//console.log(res);
					this.ppList = res.data;
					})
				},
			selectHz(){
				//查询已存在的商品
				this.$http.post("/scm/scm/xsmx/selectSp",{
					sfhz:1,
				}).then(res => {
					//console.log(res);
					this.hzList = res.data;
					})
				},
			//下载Excel
			async getExcel() {
				this.loadingGetExcel = true;
				this.disabled = true;
				await this.downloadFile('/scm/scm/xsmx/getExcel', '进销存报表.xlsx', this.querys);
				this.loadingGetExcel = false;
				this.disabled = false;
			
			},
			//Vue通用下载方法 （async await设置为同步方法）
			async downloadFile(url, filename, params) {
				await this.axios
					.request({
						url: url,
						method: 'post',
						data: {
							...params,
							ksrq:this.$util.toDateString(this.djDate[0], 'yyyy-MM-dd'),
							jsrq:this.$util.toDateString(this.djDate[1], 'yyyy-MM-dd'),
							hz:this.groupBy,
						},
						responseType: 'blob',
						timeout: 3600000
						//type: 'application/x-www-form-urlencoded'
					})
					.then(res => {
						var blob = new Blob([res.data], {
							type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
						});
						var downloadElement = document.createElement('a');
						var href = window.URL.createObjectURL(blob); // 创建下载的链接
						var contentFilename = (decodeURI(res.headers['content-disposition'])).split(
							'filename=')[1]; //获取服务器传过来的文件名
						downloadElement.href = href;
						// downloadElement.download = decodeURI(res.headers['Content-Disposition'].split('filename=')[1]); // 下载后文件名
						downloadElement.download = contentFilename || (filename || '下载的文件');
						document.body.appendChild(downloadElement);
						downloadElement.click(); // 点击下载
						document.body.removeChild(downloadElement); // 下载完成移除元素
						window.URL.revokeObjectURL(href); // 释放掉blob对象
					});
			},
			//表1 表尾合计行
			table1Footer({ columns, data }) {
				return [
					columns.map((column ) => { //, columnIndex
						if(column.property == 'spmc') { //if(columnIndex === 3) {
							return '合计:'
						}else if(column.property == 'je') { //数量的合计
							return XEUtils.sum(data,'je');
						}
						return ''
					})
				]
			}
		},
		mounted(){
			//this.selectXs();
			this.tjcxKh();
			this.selectSp();
			this.selectHz();
		}
	}
</script>

<style scoped>
	
	::v-deep .custom-background.vxe-table--render-default .vxe-table--body-wrapper {
		background-color: #cce8cf ; 
	} 
	
	.oneRow{
		border-bottom: 1px solid lightgray;
	}
	.oneCol{
		width: 57px;
		
	}
	.oneButton{
		width: 60px;
		height: 30px;
	}
	.twoRow{
		display: flex;
	}
	.twoCol{
		width: 160px;
		margin-top: 10px;
		margin-left: 5px;
	}
	.twoColDate{
		width: 250px;
		margin-top: 10px;
		margin-left: 5px;
	}
	.twoInput{
		height: 30px;
		width: 110px;
	}
	.twoDate{
		height: 30px;
		width: 200px;
	}
	.threeRow{
		margin-left: 5px;
		margin-top: 0px;
	}
	.threeInput{
		width: 20%;
		height: 30px;
	}
	.spanClass{
		font-weight: bold;
	}
	.tableDiv{
		margin-top: 0px;
		height: 90%;
	}
	.ysy-table1 {
		font-weight: 500;
	}
	
	
</style>
